<template>
  <el-dialog
    title="选择套餐"
    v-model="visibleCombo"
    width="60%"
    append-to-body
    @close="closeVisibleCombo"
  >
    <el-row :gutter="20">
      <!--标签数据-->
      <el-col :span="4" :xs="24">
        <div class="position-box">
          <el-radio-group v-model="tagId" @change="getComboType(tagId)">
            <el-radio
              v-for="(item, index) in tagOptions"
              :key="index"
              :label="item.tagId"
              :value="item.tagId"
              >{{ item.tagName }}</el-radio
            >
          </el-radio-group>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="套餐名称" prop="name">
            <el-input v-model="queryParams.name" @change="getList" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearchResect" size="small">重置</el-button>
            <el-button type="primary" @click="getList" size="small">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- @selection-change="handleSelectionChange" -->
        <el-table
          :data="tableListAll"
          max-height="580"
          highlight-current-row
          @current-change="handleSelectionChange"
          ref="tableAllRef"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column
            label="套餐名称"
            align="center"
            prop="name"
            :show-overflow-tooltip="true"
            min-width="90"
          />
          <el-table-column
            label="缩略图"
            align="center"
            prop="thumb"
            :show-overflow-tooltip="true"
            min-width="90"
          >
            <template #default="scope">
              <img :src="scope.row.thumb" style="width: 80px" />
            </template>
          </el-table-column>
          <el-table-column
            label="加热时长(秒)"
            align="center"
            prop="heatTime"
            :show-overflow-tooltip="true"
            min-width="90"
          />
        </el-table>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeVisibleCombo">取 消</el-button>
        <el-button type="primary" @click="confirmSelected">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getComboList } from '@/api/meal/combo'
import { getTagComboList } from '@/api/meal/comboTag'

const { proxy } = getCurrentInstance()
const { device_type } = proxy.useDict('device_type')
const props = defineProps({
  isTableOpen: {
    type: Boolean
  }
})
//** 套餐标签  */
const tagOptions = ref([])
function getOptions() {
  getTagComboList({
    pageNum: 1,
    pageSize: 1000,
    enable: 1,
    cityName: queryParams.value.cityName
  }).then((res) => {
    tagOptions.value = res.rows
  })
}

//** 套餐列表 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 9999,
  shelf: 1,
  name: null,
  tagId: null,
  cityName: null
})
const tableListAll = ref([])
const tableList = ref([])
const tableAllRef = ref(null)
function getList() {
  getComboList(queryParams.value).then((res) => {
    tableListAll.value = res.rows
  })
}

const tagId = ref(null)
function handleSearchResect() {
  queryParams.value.name = null
  tagId.value = null
  queryParams.value.tagId = null
  getList()
}
function closeVisibleCombo() {
  visibleCombo.value = false
  props.isTableOpen ? emit('selectedComboData') : null
}
function getComboType(tagId) {
  queryParams.value.tagId = tagId
  getList()
}

//** 选择套餐 */
const visibleCombo = ref(false)
function handleAddFileColumn(cityName) {
  queryParams.value.cityName = cityName
  getOptions()
  handleSearchResect()
  visibleCombo.value = true
  // let selectedIds = tableList.value.map((item) => item.comboId)
  // tableListAll.value.forEach((row) => {
  //   if (selectedIds.includes(row.comboId)) {
  //     nextTick(() => {
  //       tableAllRef.value.toggleRowSelection(row, true)
  //     })
  //   } else {
  //     nextTick(() => {
  //       tableAllRef.value.toggleRowSelection(row, false)
  //     })
  //   }
  // })
}
const selected = ref([])
const handleSelectionChange = (val) => {
  selected.value = val
}
const confirmSelected = () => {
  tableList.value = selected.value
  visibleCombo.value = false
  props.isTableOpen
    ? emit('renderChecked', tableList.value)
    : emit('selectedComboData', tableList.value)
}
const emit = defineEmits(['selectedComboData', 'renderChecked'])
defineExpose({
  handleAddFileColumn
})
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .input-box {
    width: 80%;
  }
}
:deep(.el-radio) {
  width: 100%;
}
.position-box {
  background-color: #f2f2f2;
  width: 100%;
  min-height: 300px;
  max-height: 600px;
  padding: 8px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
